<template>
	<view class="home">
		<!-- 头部的结构 -->
		<view class="header">
			<image src="../../static/images/logo.png" class="logo"></image>
			<view class="center">
				<text class="iconfont icon-sousuo"></text>
				<input type="text" placeholder="搜索商品" placeholder-style="color:green" />
			</view>
			<button class="btn">阴天快乐</button>
		</view>
		<!-- 导航部分 -->
		<scroll-view scroll-x="true" enable-flex="true" class="scroll">
			<view class="item" :class="{ active: currentIndex == -1 }" @click="changeIndex(-1)">推荐</view>
			<view class="item" :class="{ active: currentIndex == index }" v-for="(nav, index) in navList" :key="nav.L1Id" @click="changeIndex(index)">{{ nav.text }}</view>
		</scroll-view>

		<!-- 底部的结构 -->
		<scroll-view scroll-y="true" class="scroll1">
			<view v-show="currentIndex == -1">
				<swiper circular="true" :indicator-dots="true" :autoplay="true" :interval="1000" class="swiper">
					<swiper-item class="sw_item">
						<view class="swiper-item">
							<image src="https://yanxuan.nosdn.127.net/static-union/1660098694dc59e2.jpg?type=webp&imageView&quality=75&thumbnail=750x0" class="cat"></image>
						</view>
					</swiper-item>
					<swiper-item class="sw_item">
						<view class="swiper-item">
							<image src="https://yanxuan.nosdn.127.net/static-union/1660563775000030.jpg?type=webp&imageView&quality=75&thumbnail=750x0" class="cat"></image>
						</view>
					</swiper-item>
					<swiper-item class="sw_item">
						<view class="swiper-item">
							<image src="https://yanxuan.nosdn.127.net/static-union/16602755208b9522.png?type=webp&imageView&quality=75&thumbnail=750x0" class="cat"></image>
						</view>
					</swiper-item>
				</swiper>

				<!-- 三个小图标 -->
				<view class="iconList">
					<view class="item" v-for="(icon, index) in iconList" :key="index">
						<image :src="icon.icon" class="img"></image>
						<text>{{ icon.desc }}</text>
					</view>
				</view>

				<!-- 十个小商品 -->
				<view class="goods">
					<view class="item" v-for="(item, index) in navList" :key="index">
						<image :src="item.picUrl" class="good"></image>
						<text class="goodName">{{ item.text }}</text>
					</view>
				</view>

				<!-- 三个卡片组件 -->
				<Card v-for="(card, index) in cardList" :key="index" :card="card"></Card>
			</view>
			<Card1 v-show="currentIndex!= -1" :index="currentIndex"></Card1>
		</scroll-view>
	</view>
</template>
<script>
// 引入card
import Card from './components/card.vue';
import Card1 from './components/card1.vue';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			//推荐上来底下有线
			currentIndex: -1
		};
	},
	components: {
		Card,
		Card1
	},
	//挂在完毕
	mounted() {
		//封装方法：通知vuex发请去获取首页数据
		this.getHomeData();
	},
	methods: {
		getHomeData() {
			this.$store.dispatch('getHomeData');
		},
		//点击导航是一个标签事件回调
		changeIndex(index) {
			this.currentIndex = index;
		}
	},
	computed: {
		...mapGetters(['navList', 'iconList', 'cardList'])
	}
};
</script>
<style lang="stylus" scoped>
.home
	width 100%
	height 100%
	.header
		width 100%
		height 80rpx
		display flex
		padding 20rpx
		box-sizing border-box
		.logo
			width 120rpx
			height 40rpx
		.btn
			margin 0
			padding 0
			width 140rpx
			height 60rpx
			font-size 24rpx
		.center
			flex 1
			border 1px solid #eee
			display flex
			height 60rpx
			align-items center
			font-size 24rpx
			margin 0rpx 20rpx
			.iconfont
				margin 0 10rpx
	.scroll
		display flex
		width 100%
		height 85rpx
		margin-top 10rpx
		.item
			width 140rpx
			height 80rpx
			flex-shrink 0
			text-align center
			line-height 80rpx
		.active
			border-bottom 1px solid yellowgreen
	.scroll1
		width 100%
		height calc(100vh - 160rpx)
		margin-top 10rpx
		.swiper
			width 100%
			height 300rpx
			.sw_item
				width 100%
				height 100%
				.swiper-item
					width 100%
					height 100%
					.cat
						width 100%
						height 100%
		.iconList
			width 100%
			display flex
			margin-top 10rpx
			.item
				flex 1
				text-align center
				font-size 24rpx
				display flex
				align-items center
				justify-content center
				.img
					width 32rpx
					height 32rpx
	.goods
		width 100%
		display flex
		flex-wrap wrap
		margin-top 20rpx
		.item
			width 20%
			display flex
			flex-direction column
			align-items center
			.good
				width 110rpx
				height 110rpx
				border-radius 40rpx
			.goodName
				font-size 26rpx
				margin 20rpx 0
</style>
